<template>
  <div class="m-product">
    <div class="m-p-top">
      <div class="m-app-container m-p-top-c clearfix">
        <!-- 投资信息 -->
        <div class="fl m-p-c-l">
          <p>投融宝-FXZQ20180374</p>
          <div class="p-info">
            <div class="info">
              <div class="info-i" style="width: 18%">
                <span class="info-msg money">
                  <span>8.6</span><span class="fonts">%</span>
                </span>
                <br>
                <span class="info-tip">预期年化收益率</span>
              </div>
              <div class="info-i" style="width: 18%">
                <span class="info-msg">
                  365<span class="fonts">天</span>
                </span>
                <br>
                <span class="info-tip">产品期限</span>
              </div>
              <div class="info-i" style="width: 18%">
                <span class="info-msg">
                  8,000<span class="fonts">元</span>
                </span>
                <br>
                <span class="info-tip">标的总额</span>
              </div>
            </div>
            <!-- 进度条 -->
            <div class="m-p-p">
              <w-progress :height="8" :percentage="30"></w-progress>
            </div>
            <!-- 详细信息 -->
            <div class="p-info-tip">
              <div class="p-info-item">
                <span>还款方式：到期一次性支付本金和收益</span>
              </div>
              <div class="p-info-item">
                <span>收益起计日：购买日</span>
              </div>
              <div class="p-info-item">
                <span>资金到账日：T+2(工作日)</span>
                <span class="p-tip"></span>
              </div>
              <div class="p-info-item">
                <span>产品到期日：2019-10-20</span>
              </div>
              <div class="p-info-item">
                <span>起投金额：10000元(以10000元的整数倍递增)</span>
              </div>
              <div class="p-info-item">
                <span>风险等级：低</span>
                <span class="p-tip"></span>
              </div>
              <div class="p-info-item">
                <span>风险措施：本金和收益到期兑付担保</span>
              </div>
              <div class="p-info-item">
                <span>剩余可投金额：240000.00元</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 投资 -->
        <div class="fr m-p-c-r">
          <div class="clearfix">
            <span class="fl">剩余可投</span>
            <span class="fr">240000.00元</span>
          </div>
          <!-- 可投 -->
          <div class="p-money clearfix">
            <div class="p-input fl">
              <w-input holder="10000整数倍" rule="onlyInt|isNumMultiple" error="请输入纯数字|请输入10000整数倍"></w-input>
            </div>
            <div class="fr cur">元</div>
          </div>
          <!-- 立即投资 -->
          <div class="btn">
            <w-button type="main" @on-click="onInvest">立即投资</w-button>
          </div>
          <p>
            <span style="color: #ABABAB">账户余额：</span>
            <span>
              请<span style="color: #3EAFFE;cursor: pointer;" @click="$router.push('/login')">登录</span>后查看
            </span>
            <span class="c-main">500元</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 产品详细内容 -->
    <div class="m-app-container m-p-middle">
      <w-tab-select @on-change="_changeTab">
        <div class="item-info" v-if="curTabIndex == 0">
          <div class="txt">
            <p>
              “投融宝-FXZQ20180374”产品转让债权系中心与债务人2018年8月14日签订的《借款合同》所形成的部分债权，该债权项下借款人主要经营资产投资，目前运转情况正常。借款人本次借款主要 用于经营周转，还款来源为回笼款。借款人的资产实力、经营情况经中心专业风控团队审核，风险可控。 更多介绍：
            </p>
            <p class="p-more">更多介绍：<span style="color: #3EAFFE;cursor: pointer;">"投融宝-FXZQ20180374产品说明书"</span></p>
          </div>
          <div class="tabs-list">
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>交易时间</span>
              </div>
              <div class="tab-r fr">
                <span>00:00 ~ 24:00</span>
              </div>
            </div>
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>收益起计日</span>
              </div>
              <div class="tab-r fr">
                <span>"产品说明书"中列明的收益起计日，为购买日。</span>
              </div>
            </div>
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>资金到账日</span>
              </div>
              <div class="tab-r fr">
                <span>T为产品到期日，T+2（工作日）为T日后第二个工作日。</span>
              </div>
            </div>
          </div>
        </div>

        <div class="item-info" v-if="curTabIndex == 1">
          <p class="p-2">
            本产品由<span class="c-blue">浙江衢州宇都集团</span>提供产品到期兑付担保。
          </p>
          <p class="p-2">本产品由银行提供全程资金存管，投资者资金账户与中心自有资金账户完全隔离。</p>
        </div>

        <div class="item-info" v-if="curTabIndex == 2">
          <div class="tabs-list">
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>已还本息</span>
              </div>
              <div class="tab-r fr">
                <span>0.00元</span>
              </div>
            </div>
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>待还本息</span>
              </div>
              <div class="tab-r fr">
                <span>8000元</span>
              </div>
            </div>
          </div>
          <!-- tabel -->
          <div class="tab-info-list">
            <w-table :columns="columns2">
              <tr>
                <td>1</td>
                <td>2018-09-06</td>
                <td>未归还</td>
                <td>0</td>
                <td>5050</td>
              </tr>
            </w-table>
          </div>
        </div>

        <div class="item-info" v-if="curTabIndex == 3">
          <div class="tabs-list">
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>加入人数</span>
              </div>
              <div class="tab-r fr">
                <span>10人</span>
              </div>
            </div>
            <div class="tabs-item clearfix">
              <div class="tab-l fl">
                <span>投标总额</span>
              </div>
              <div class="tab-r fr">
                <span>8000元</span>
              </div>
            </div>
          </div>
          <!-- tabel -->
          <div class="tab-info-list">
            <w-table :columns="columns">
              <tr>
                <td>1</td>
                <td>s*****</td>
                <td>10000.00</td>
                <td>2018-09-06</td>
              </tr>
            </w-table>
          </div>
        </div>
      </w-tab-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curTabIndex: 0,
      columns2: [
        {title: '期数', width: '20%'},
        {title: '还款日期', width: '20%'},
        {title: '还款状态', width: '20%'},
        {title: '逾期天数', width: '20%'},
        {title: '归还本息', width: '20%'}
      ],
      columns: [
        {title: '序号', width: '25%'},
        {title: '投标人', width: '25%'},
        {title: '投标金额', width: '25%'},
        {title: '投标时间', width: '25%'}
      ]
    }
  },
  methods: {
    /**
     * 切换选项卡操作
     */
    _changeTab(curIndex) {
      this.curTabIndex = curIndex
    },
    /**
     * 立即投资
     */
    onInvest() {
      // 若为登录，则跳登录
      this.$router.push(`/login?redict=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss">
.m-p-top {
  .p-input {
    .form-control, textarea {
      border: none;
    }
  }
  .p-money {
    .w-input .error-tip {
      margin-top: 40px
    }
  }
}
.m-p-middle {
  .options span {
    margin-right: 40px;
  }
}
</style>

<style lang="scss" scoped>
@import '../scss/_var.scss';
$fontSize: 12px;
.m-product {
  
}
.m-p-top {
  width: 100%;
  height: 430px;
  background: url(../assets/p_banner.png) no-repeat;    
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .m-p-top-c {
    flex: 1;
    height: 380px;
    .m-p-c-l {
      width: 800px;
      height: inherit;
      padding: 20px 80px 20px 20px;
      margin-right: 18px;
      background: url(../assets/p_bg1.png) no-repeat;
      background-size: 100% 100%;
      & > p {
        font-size: 16px;
        padding-bottom: 20px;
        border-bottom: 1px solid $border-main;
      }
      .p-info {
        margin-top: 38px;
      }
      .info {
        .info-i {
          display: inline-table;
          .info-msg {
            font-size: 34px;
            line-height:48px;
          }
          .money {
            color:rgba(245,47,62,1);
            background:linear-gradient(180deg, rgba(255,119,26,1) 0%, rgba(252,62,56,1) 100%);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
          }
          .fonts {
            font-size: 16px;
          }
          .info-tip {
            color:#626262;
          }
        }
      }
      .m-p-p {
        width: 700px;
        margin: 30px 0 40px;
      }
      .p-info-tip {
        .p-info-item {
          display: inline-block;
          margin-right: 50px;
          margin-bottom: 18px;
          color: $color-gray-light;
          &:nth-child(3n) {
            margin-right: 0
          }
          .p-tip {
            width: 20px;
            height: 20px;
            cursor: pointer;
            background: url(../assets/icon_tip.png) no-repeat;
            display: inline-block;
            vertical-align: text-bottom;
            margin-left: 8px;
          }
        }
      }
    }
    .m-p-c-r {
      width: 412px;
      height: inherit;
      padding: 62px 86px;
      background: url(../assets/p_bg2.png) no-repeat;
      background-size: cover;
      .p-money {
        margin: 40px 0;
        width: 100%;
        height: 40px;
        border: 1px solid $border-main;
        .p-input {
          width: 80%;
          display: inline-block;
        }
        .cur {
          line-height: 40px;
          margin-right: 10px;
        }
      }
      .btn {
        width: 100%;
        height: 50px;
        margin-bottom: 42px;
      }
      & > p {
        text-align: center;
      }
    }
  }
}
.m-p-middle {
  margin: 20px auto 30px;
  padding-top: 10px;
  .item-info {
    font-size: $fontSize;
    .txt {
      margin-bottom: 40px;
      color: $color-gray-light;
    }
    .p-more {
      padding-top: 20px;
    }
    .p-2 {
      color: $color-gray-light;
      margin-bottom: 20px;
    }
  }
}
.tabs-list {
  .tabs-item {
    margin-bottom: 10px;
    height:50px;
    line-height: 50px;
    &:last-child {
      margin-bottom: 0
    }
    .tab-l {
      width:260px;
      height: 100%;
      text-align: center;
      font-weight: bold;
      background:rgba(255,248,242,1);
    }
    .tab-r {
      width:920px;
      height: 100%;
      padding-left: 50px;
      background:rgba(249,249,249,1);
    }
  }
}
.tab-info-list {
  margin-top: 10px;
}
</style>
